import React from 'react'
import { View, Text, ViewStyle, TextStyle, StyleSheet } from 'react-native'
import InputNumber from './InputNumber'
import { translateSize, themeColors, definedColors, commonStyle } from 'styles'

interface InputMoneyProps {
	style?: ViewStyle
	unitSytle?: TextStyle
	showSymbol?: boolean
	isLarge?: boolean
	editable?: boolean
	upperLimit: number
	defaultValue: number
	onChange: (text: string) => void
}

const InputMoney: React.FC<InputMoneyProps> = props => {
	return (
		<View style={[commonStyle.containerRow, styles.container]}>
			{props.showSymbol ? <Text style={styles.symbol}>¥</Text> : <React.Fragment />}
			<InputNumber
				isMoney={true}
				editable={props.editable}
				defaultValue={props.defaultValue}
				style={[styles.input, props.isLarge ? styles.large : {}, commonStyle.amountStyle]}
				lowerLimit={0}
				upperLimit={props.upperLimit}
				onChange={props.onChange}
			/>
			<Text style={[styles.unit, props.isLarge ? styles.large : {}, commonStyle.amountStyle]}>元</Text>
		</View>
	)
}

interface InputMoneyStyle {
	container: ViewStyle
	symbol: TextStyle
	input: TextStyle
	unit: TextStyle
	large: TextStyle
}

const styles = StyleSheet.create<InputMoneyStyle>({
	container: {
		paddingLeft: translateSize(62),
		paddingRight: translateSize(32),
		alignItems: 'center',
	},
	symbol: {
		fontSize: translateSize(42),
		color: themeColors.title,
	},
	input: {
		fontSize: translateSize(30),
		color: themeColors.title,
		fontWeight: 'bold',
	},
	unit: {
		fontSize: translateSize(30),
		paddingLeft: translateSize(5),
		color: themeColors.title,
		fontWeight: 'bold',
	},
	large: {
		fontSize: translateSize(42),
	},
})

export default InputMoney
